<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="background-decoration">
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>

    <!-- 顶部品牌区域 -->
    <view class="brand-section">
      <view class="logo-container">
        <image class="brand-logo" src="/static/logo.png" mode="aspectFit"></image>
      </view>
      <text class="brand-title">超级共享空间</text>
      <text class="brand-subtitle">移动管理平台</text>
    </view>

    <!-- 登录表单卡片 -->
    <view class="login-card">
      <view class="card-header">
        <text class="card-title">账号登录</text>
        <text class="card-subtitle">请输入您的登录信息</text>
      </view>

      <uni-forms ref="formRef" :model="formData" :rules="rules" class="login-form">
        <uni-forms-item name="username" class="form-item">
          <view class="input-wrapper">
            <uni-icons type="person" size="20" color="#999" class="input-icon"></uni-icons>
            <uni-easyinput
              v-model="formData.username"
              placeholder="请输入用户名"
              :styles="inputStyles"
              :inputBorder="false"
              class="custom-input"
            ></uni-easyinput>
          </view>
        </uni-forms-item>
        
        <uni-forms-item name="password" class="form-item">
          <view class="input-wrapper">
            <uni-icons type="locked" size="20" color="#999" class="input-icon"></uni-icons>
            <uni-easyinput
              type="password"
              v-model="formData.password"
              placeholder="请输入密码"
              :styles="inputStyles"
              :inputBorder="false"
              class="custom-input"
            ></uni-easyinput>
          </view>
        </uni-forms-item>
      </uni-forms>

      <!-- 登录按钮 -->
      <view class="action-section">
        <button 
          class="login-button" 
          :class="{ 'loading': loading, 'disabled': !canLogin }"
          @click="handleLogin" 
          :loading="loading"
          :disabled="!canLogin"
        >
          <text class="button-text">{{ loading ? '登录中...' : '立即登录' }}</text>
        </button>
        
        <view class="extra-actions">
          <text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer-info">
      <text class="version-text">版本 1.0.0</text>
      <text class="copyright-text">© 2024 超级共享空间</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import type { UniFormsInstance } from '@dcloudio/uni-ui';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const formRef = ref<UniFormsInstance | null>(null);
const loading = ref(false);

const formData = reactive({
  username: '',
  password: '',
});

const rules = {
  username: {
    rules: [
      { required: true, errorMessage: '请输入用户名' },
      { minLength: 3, errorMessage: '用户名至少3个字符' }
    ],
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      { minLength: 6, errorMessage: '密码至少6个字符' }
    ],
  },
};

const inputStyles = {
  backgroundColor: 'transparent',
  borderColor: 'transparent',
  color: '#333',
  fontSize: '32rpx'
};

// 计算是否可以登录
const canLogin = computed(() => {
  return formData.username.trim().length >= 3 && 
         formData.password.trim().length >= 6 && 
         !loading.value;
});

// 处理登录
const handleLogin = async () => {
  if (!formRef.value || !canLogin.value) return;

  try {
    await formRef.value.validate();
    loading.value = true;
    
    // 模拟登录延迟，提供更好的用户体验
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    await userStore.login(formData);
    
    uni.showToast({
      title: '登录成功',
      icon: 'success',
      duration: 1500
    });

    // 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index',
      });
    }, 1500);
    
  } catch (error) {
    console.error('登录失败:', error);
    uni.showToast({
      title: '登录失败，请检查用户名和密码',
      icon: 'none',
      duration: 2000
    });
  } finally {
    loading.value = false;
  }
};

// 处理忘记密码
const handleForgotPassword = () => {
  uni.showToast({
    title: '请联系管理员重置密码',
    icon: 'none',
    duration: 2000
  });
};

onMounted(() => {
  // 页面加载完成后的初始化操作
  console.log('登录页面已加载');
});
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #1890FF 0%, #40A9FF 50%, #F0F9FF 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 32rpx;
  box-sizing: border-box;
  overflow: hidden;
}

// 背景装饰
.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    
    &.circle-1 {
      width: 300rpx;
      height: 300rpx;
      top: -150rpx;
      right: -150rpx;
      animation: float 6s ease-in-out infinite;
    }
    
    &.circle-2 {
      width: 200rpx;
      height: 200rpx;
      top: 200rpx;
      left: -100rpx;
      animation: float 8s ease-in-out infinite reverse;
    }
    
    &.circle-3 {
      width: 150rpx;
      height: 150rpx;
      bottom: 300rpx;
      right: 50rpx;
      animation: float 7s ease-in-out infinite;
    }
  }
}

// 品牌区域
.brand-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 120rpx;
  margin-bottom: 80rpx;
  
  .logo-container {
    width: 160rpx;
    height: 160rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    backdrop-filter: blur(10rpx);
    border: 4rpx solid rgba(255, 255, 255, 0.3);
  }
  
  .brand-logo {
    width: 120rpx;
    height: 120rpx;
  }
  
  .brand-title {
    font-size: 48rpx;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }
  
  .brand-subtitle {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
  }
}

// 登录卡片
.login-card {
  width: 100%;
  max-width: 640rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 48rpx 40rpx;
  box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.15);
  backdrop-filter: blur(10rpx);
  margin-bottom: 60rpx;
  
  .card-header {
    text-align: center;
    margin-bottom: 48rpx;
    
    .card-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      display: block;
      margin-bottom: 16rpx;
    }
    
    .card-subtitle {
      font-size: 26rpx;
      color: #666;
      display: block;
    }
  }
}

// 表单样式
.login-form {
  margin-bottom: 48rpx;
  
  .form-item {
    margin-bottom: 32rpx;
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background: #F8F9FA;
      border: 2rpx solid #E8E8E8;
      border-radius: 16rpx;
      padding: 24rpx 32rpx;
      transition: all 0.3s ease;
      
      &:focus-within {
        border-color: #1890FF;
        background: #F0F9FF;
        box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1);
      }
      
      .input-icon {
        margin-right: 24rpx;
        flex-shrink: 0;
      }
      
      .custom-input {
        flex: 1;
        
        :deep(.uni-easyinput__content) {
          background: transparent !important;
          border: none !important;
          
          .uni-easyinput__content-input {
            font-size: 32rpx !important;
            color: #333 !important;
            
            &::placeholder {
              color: #999 !important;
            }
          }
        }
      }
    }
  }
}

// 操作区域
.action-section {
  .login-button {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
    border: none;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32rpx;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
    
    &::after {
      border: none;
    }
    
    &:not(.disabled):not(.loading):active {
      transform: translateY(2rpx);
      box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.4);
    }
    
    &.disabled {
      background: #D9D9D9;
      box-shadow: none;
      
      .button-text {
        color: #999;
      }
    }
    
    &.loading {
      background: linear-gradient(135deg, #40A9FF 0%, #69C0FF 100%);
    }
    
    .button-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }
  
  .extra-actions {
    display: flex;
    justify-content: flex-end;
    
    .forgot-password {
      font-size: 26rpx;
      color: #1890FF;
      cursor: pointer;
      transition: color 0.3s ease;
      
      &:active {
        color: #40A9FF;
      }
    }
  }
}

// 底部信息
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  margin-bottom: 60rpx;
  
  .version-text {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8rpx;
  }
  
  .copyright-text {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.6);
  }
}

// 动画效果
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

// 响应式适配
@media screen and (max-height: 800px) {
  .brand-section {
    margin-top: 80rpx;
    margin-bottom: 60rpx;
    
    .logo-container {
      width: 120rpx;
      height: 120rpx;
      
      .brand-logo {
        width: 80rpx;
        height: 80rpx;
      }
    }
    
    .brand-title {
      font-size: 40rpx;
    }
    
    .brand-subtitle {
      font-size: 24rpx;
    }
  }
  
  .login-card {
    padding: 40rpx 32rpx;
  }
}
</style>